<template>
  <div>
    <el-dialog
      v-model="isShow"
      :title="$demoi18n('panel.extensionSetting.dialogTitle')"
      width="650px"
      top="8.4vh"
      append-to-body
      destroy-on-close
      :close-on-click-modal="false"
      :class="`${customClass} ${visualThemeClassName} ${xvueNameSpace}`"
    >
      <div class="extension-setting-main">
        <el-form
          ref="form"
          class="form"
          label-position="right"
          :model="extensionForm"
          :rules="rules"
          label-width="85px"
        >
          <div class="config-table">
            <el-button
              class="btn-sure button-sure"
              size="default"
              icon="CirclePlus"
              :disabled="addDisable"
              @click.stop="addNewRow(extensionTemp, extensionItem)"
            >{{ $demoi18n('btn.add') }}</el-button>
            <span class="extension-setting-tip">
              <el-icon><InfoFilled /></el-icon>
              <span>{{ $demoi18n('panel.tip.rowExtension') }}</span>
            </span>
            <el-table
              ref="table"
              class="config-panel-table mapping-table"
              :data="extensionForm.extensionData"
              :row-style="{ height: '25px' }"
              :header-row-style="{ height: '25px' }"
              max-height="500"
              :header-cell-style="{ lineHeight: '15px' }"
            >
              <el-table-column
                type="index"
                :label="$demoi18n('panel.th.number')"
                width="50"
                :render-header="renderTableHeader"
              >
              </el-table-column>
              <el-table-column
                :label="$demoi18n('panel.th.mergeColumns')"
                :min-width="250"
                :render-header="renderTableHeader"
              >
                <template #default="scope">
                  <ValueInputer
                    v-model:value="scope.row.column"
                    :enum-values="fieldList"
                    :rules="genRulesByKey('extension.field')"
                    @change="handleColumnChange(scope.row, scope.$index)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                :label="$demoi18n('panel.th.mergeValues')"
                :min-width="250"
                :render-header="renderTableHeader"
              >
                <template #default="scope">
                  <VsFormItem
                    :prop="`extensionData[${scope.$index}].type`"
                    :rules="genRulesByKey('extension.type')"
                  >
                    <ValueInputer
                      v-model:value="scope.row.value"
                      :enum-values="scope.row.valueList"
                      :value-type="'List'"
                      :multiple="true"
                      :allow-create="true"
                      :rules="genRulesByKey('extension.field')"
                    />
                  </VsFormItem>
                </template>
              </el-table-column>

              <el-table-column
                :label="$demoi18n('word.operation')"
                :min-width="50"
                :render-header="renderTableHeader"
              >
                <template #default="scope">
                  <el-button
                    icon="Delete"
                    :link="true"
                    type="primary"
                    @click.stop="deleteCurRow(scope.row)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
        <div class="action-button-group">
          <el-button
            class="button-sure"
            size="default"
            type="primary"
            @click="handleSave()"
          >{{
            $demoi18n('btn.confirm')
          }}</el-button>
          <el-button
            class="button-cancel"
            size="default"
            @click="cancel()"
          >{{ $demoi18n('btn.close') }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang='jsx'>
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import { genRulesByKey } from '@/utils/rules';
import { isUndefinedNull } from '@/utils/util';
const MAX_COUNT = 4;
export default {
  name: 'ExtensionSetting',
  components: { ValueInputer },
  mixins: [],
  props: ['form', 'config', 'activeColorRadio', 'activeColorSwitch', 'nameList', 'fieldList'],
  emits: ['save'],
  data() {
    return {
      xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
      xvueTheme: window._adoPremise.uc.theme,
      customClass: `extension-setting-dialog extension-setting-dialog-${window._adoPremise.uc.theme || 'light'}`,
      isShow: false,
      extensionForm: {},
      extensionItem: {
        column: '',
        value: [],
        valueList: [],
      },
      extensionTemp: {},
      rules: {},
      addDisable: false,
    };
  },
  computed: {
    thisComp() {
      return this;
    },
  },
  watch: {},
  methods: {
    genRulesByKey,
    openDialog() {
      const { extension } = this.form;
      const extensionData = JSON.parse(JSON.stringify(extension));
      extensionData.forEach(extensionItem => {
        const { column } = extensionItem;
        if (column) {
          const arr = this.nameList.map(n => {
            if (!isUndefinedNull(n[column])) {
              return n[column].toString();
            }
            return '';
          });
          extensionItem.valueList = extensionItem.valueList || Array.from(new Set(arr));
        }
      });
      this.extensionForm = {
        extensionData,
      };
      this.isShow = true;
    },
    cancel() {
      this.isShow = false;
    },

    addNewRow(temp, item) {
      const _temp = JSON.parse(JSON.stringify(item));
      this.extensionForm.extensionData.push(_temp);
      this.addDisable = this.extensionForm.extensionData.length >= MAX_COUNT;
    },
    deleteCurRow(item) {
      const index = this.extensionForm.extensionData.indexOf(item);
      this.extensionForm.extensionData.splice(index, 1);
      this.addDisable = this.extensionForm.extensionData.length >= MAX_COUNT;
    },
    handleColumnChange(row) {
      if (row.column) {
        const arr = this.nameList.map(n => {
          if (!isUndefinedNull(n[row.column])) {
            return n[row.column].toString();
          }
          return '';
        });
        row.valueList = Array.from(new Set(arr));
      }
    },
    handleSave() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }
        if (!this.checkExtension()) {
          return;
        }
        this.$emit('save', this.extensionForm);
        this.cancel();
      });
    },
    checkExtension() {
      let errorText = '';
      const extensionGroup = this.extensionForm.extensionData;
      if (extensionGroup.length > 0) {
        const textArray = extensionGroup.map(data => data.column).filter(column => column !== '');
        const textSet = new Set(textArray);
        textSet.delete('');
        if (textSet.size < textArray.length) {
          errorText = this.$demoi18n('message.duplicateStringExtension');
          this.emitToPanel(errorText);
          return false;
        }
      }

      return true;
    },
    emitToPanel(error) {
      this.$message.error(error);
    },
    renderTableHeader({ column }) {
      return (<el-tooltip placement="top" content={column.label} effect={this.xvueTheme}>
        <span>{column.label}</span>
      </el-tooltip>
      );
    },
  },
};
</script>

<style lang="less">
@import '../../../common/color-picker-panel.less';
</style>
<style lang="less" scoped>
.extension-setting-dialog {
  .extension-setting-main {
    .form {
      width: 100%;
      :deep(.el-form-item) {
        margin-bottom: 0;
      }
      .config-table {
        .extension-setting-tip{
          font-size: 12px;
          color: #00aaff;
          margin-left: 10px;
          display: inline-flex;
          align-items: center;
          vertical-align: sub;
        }
        :deep(.el-table) {
          .el-form-item__error {
            top: 100%;
            padding-top: 0;
          }
          .is-error {
            margin-bottom: 15px;
          }
          .cell {
            padding: 0 3px !important;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .extension-column {
              display: flex;
              align-items: center;
            }
            .el-input__inner {
              padding: 0 5px !important;
            }
          }
          td,
          th {
            padding: 5px 0 !important;
            overflow:hidden;
          }
          th div {
            display: inline;
            line-height: 15px;
          }
          .el-table__row > td {
            border: none;
          }
        }
        :deep(.el-form-item__content) {
          margin-left: 0 !important;
        }
      }
    }
  }

  .action-button-group {
    text-align: right;
    padding-top: 20px;
    .button-sure {
      padding: 9px 35px;
      border-radius: 0;
    }
    .button-cancel {
      padding: 9px 35px;
      border-radius: 0;
    }
  }
}
</style>

<style lang="less">
@font_color_dark: #98cae6;
@borderColor_dark: #116584;
@textColor_dark: #ffffff;
@bgColor_dark: #000c17;
@font_color_active_dark: #00f0ff;
@background_color_dark: #071f30;
.extension-setting-dialog-dark {
  .el-dialog__header {
    background: #183c5a;
    .el-dialog__title {
      color: #fff;
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: #fff;
      }
    }
  }

  .el-dialog__body {
    background: #0e2b40;

    .el-form-item__label {
      color: @font_color_dark;
    }

    .el-input {
      .el-input__inner {
        border-color: @borderColor_dark;
        color: @textColor_dark;
        background-color: @bgColor_dark;
      }

      .el-input__icon {
        color: @borderColor_dark;
      }
    }
    // 表格
    .config-panel-table {
      color: @font_color_dark;
      background-color: @background_color_dark;

      &::before {
        background-color: @background_color_dark;
      }

      .cell {
        padding: 0 3px !important;
        .el-tag--info {
          background-color: #1f1f1f;
          border-color: #1f1f1f;
          color: #fff;
          .el-tag__close {
            color: #fff;
            background-color: #102e4f;
          }
        }
      }
      td,
      th {
        padding: 5px 0 !important;
      }

      .el-table__header {
        th {
          background-color: #122b40 !important;
          border-color: #122b40;
          color: @font_color_dark;
        }
      }

      .el-table__body {
        tr {
          td {
            background-color: @background_color_dark;
            border-color: @background_color_dark;

            .icon-library-open {
              background-color: unset;
              border-color: #0eb4c2;
            }
          }
        }
      }

      .el-table__empty-block {
        background-color: #093758;

        .el-table__empty-text {
          color: @font_color_active_dark;
        }
      }
    }

    .button-sure {
      background-color: #0eb4c2;
      border-color: #0eb4c2;
      color: #fff;

      .el-icon-circle-plus {
        color: #fff;
      }
    }

    .button-cancel {
      background-color: #064559;
      border-color: #064559;
      color: #fff;

      .el-icon-circle-plus {
        color: #fff;
      }
    }
  }
}
</style>
